AULA06 - DOM¶


AGENDA¶

  • DOM
  • Selecionando elementos do DOM
  • Carregamento do DOM e recursos
  • Referências
  • Perguntas

1. Árvore DOM¶

  • Consulte DOM.
Fonte: Disponível em: https://www.alura.com.br/artigos/o-que-e-o-dom
Acesso em: 09 mar. 2023

1.1. Selecionando itens do DOM¶

  • Consulte Javascript.info.
  • Podemos selelcionar elementos do DOM de diversas maneiras:

Utilizando getElement*¶

<div id="a1">
  <div id="a1-conteudo">Elemento</div>
</div>
<script>
// selecionando o elemento
        let elem = document.getElementById('a1');
    // modificando a cor do background
        elem.style.background = 'red';
    // modificando a cor do fonte
        elem.style.color = 'white';
    // atribuindo conteúdo 
        elem.textContent = "Ana";
</script>
  1. Acessando diretamente o id. Porém, pode causar erro, caso exista variáveis com o mesmo nome que o id.
a1.style.background = "red";
a1.textContent = "Ana";
a1.style.color = "white";

Utilizando querySelector*¶

<ul>
  <li>1.Primeiro</li>
  <li>2.Segundo (último)</li>
</ul>
<ul>
  <li>3.Primeiro</li>
  <li>4.Segundo (último)</li>
</ul>
<script>
  • Exibe no alerta, os últimos filhos li das listas desordenadas ul.
let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "2.Segundo (último)", "4.Segundo (último)"
  }
</script>

Utilizando matches¶

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

<script>
// can be any collection instead of document.body.children
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("The archive reference: " + elem.href );
    }
  }
</script>

1.2. Carregamento do DOM e recursos¶

1.2.1. Ciclo de vida¶

  • O ciclo de vida do carregamento de uma página, consiste em 3 eventos importantes:
    • DOMContentLoaded: onde o navegador carrega totalmente o HTML, e a árvore DOM é constituída, porém recursos externos como imagens, estilos ainda não podem ser carregados.
    • load: além do carregamento do HTML, os recursos externos são carregados: imagens, estilos etc.
    • beforeunload/unload: o usuário está saindo da página:
      • beforeunload: podemos verificar se o usuário salvou as alterações e perguntar se realmente deseja sair.
      • unload: o usuário quase saiu, mas ainda podemos iniciar algumas operações, como o envio de estatísticas.

1.2.2. Evento window.onload¶

  • O evento load no objeto window é acionado quando a página inteira é carregada, incluindo estilos, imagens e outros recursos. Este evento está disponível através da propriedade onload.
  • Exemplo copiado do site [Javascript.info]:
<script>
  window.onload = function() { // same as window.addEventListener('load', (event) => {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

1.2.3. Evento window.onunload¶

  • O evento unload no objeto window é acionado quando usuário sai da página.

1.2.4. Outros eventos¶

  • Javascript.info - Diversos.

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.
  • Javascript.info.


ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>